<ion-header>
  <ion-navbar>
    <ion-title>{{data?.event?.title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content contentTop="4.8rem" class="home">
  <ion-slides [style.height.px]="slideHeight" [options]="mySlideOptions">
    <ion-slide *ngFor="let item of data?.event?.documents">
      <div class="slide-image">
        <div class="image-loading"></div>
        <div class="img" [ngStyle]="{'background-image': backgroundImageStyle(item.uri)}"></div>
        <div class="slider-bar">
          <div class="slider-bar-inner">
            <div class="text-ellipsis text-color-white">
              <span *ngIf="item.title">{{item.title}}</span>
              <span *ngIf="!item.title">{{data?.event?.title}}</span>
            </div>
          </div>
        </div>
      </div>
    </ion-slide>
  </ion-slides>
  <div class="text">

  </div>
  <div class="my-grid">
        <div class="my-col my-border col-1" [style.height.px]="rowHeight" (click)="gotoSession()">
          <div class="col-inner">
            <div class="img introduction"></div>
            <div class="space"></div>
            <div class="text">介绍</div>
          </div>
        </div>
        <div class="my-col my-border col-2" [style.height.px]="rowHeight" (click)="gotoSchedule()">
          <div class="col-inner">
            <div class="img schedule"></div>
            <div class="space"></div>
            <div class="text">日程</div>
          </div>
        </div>
        <div class="my-col my-border col-3" [style.height.px]="rowHeight" (click)="gotoGuest()">
          <div class="col-inner">
            <div class="img guest"></div>
            <div class="space"></div>
            <div class="text">嘉宾</div>
          </div>
        </div>
        <div class="my-col my-border col-4" [style.height.px]="rowHeight" (click)="gotoRegister()">
          <div class="col-inner">
            <div class="img register"></div>
            <div class="space"></div>
            <div class="text">报名</div>
          </div>
        </div>
        <div class="my-col my-border col-5" [style.height.px]="rowHeight" (click)="gotoService()">
          <div class="col-inner">
            <div class="img service"></div>
            <div class="space"></div>
            <div class="text">服务</div>
          </div>
        </div>
        <div class="my-col my-border col-6" [style.height.px]="rowHeight" (click)="gotoAround()">
          <div class="col-inner">
            <div class="img around"></div>
            <div class="space"></div>
            <div class="text">周边</div>
          </div>
        </div>
  </div>
</ion-content>
